<template>
	<image style="width: 100%;height: 390px;z-index: 1;position: relative;" mode="widthFix"
		:src='imgURL3+"me/login/bg.png"'></image>
	<view @click="returnTo" style="position: absolute;top:20px;z-index: 9;"><uni-icons type="left" size="30"
			color="#ffffff"></uni-icons></view>
	<view
		style="height: 200px;width: 100%;background: linear-gradient(to bottom,#7E0D11,#994043,#fff); margin-top: -10px;">
	</view>
	<view style="width: 100%;height: 320px;padding: 20px;z-index: 9;position: absolute;margin-top: -370px;">
		<view style="background-color:#fff; height:100%;width: 100%;border-radius: 10px;padding: 25px;">
			<view>
				<view class="input-item flex-row" style="padding: 25px 0 20px 0; border-bottom: 1px solid #D8D8D8;">
					<view style="font-size: 20px;color: red;font-weight: 700;">+86</view>
					<input style="margin:5px 0 0 15px;" v-model="from.phone" class="input" type="text"
						placeholder="请输入您的手机号" maxlength="30" />
				</view>
				<!-- 				<view class="input-item flex-row" style="padding: 25px 0 20px 0; border-bottom: 1px solid #D8D8D8;">
					<image :src="imgURL3+'me/login/password.png'" style="width: 30px;height: 30px;margin-left: ;">
					</image>
					<input v-model="from.password" class="uni-input" style="margin:5px 0 0 30px;" placeholder="请输入密码"
						:password="showPassword" />
				</view> -->
				<view class="input-item flex-row" style="padding: 25px 0 20px 0;">
					<view class="flex-row-bt" style="width: 100%;">
						<input v-model="from.authCode" type="number" class="input" placeholder="请输入验证码" maxlength="6" />
						<view class="themeColor text-sm" @tap.stop="getCode">{{tips}}</view>
					</view>
				</view>
				<view class="flex-row margin-tb-sm text-sm" style="flex-wrap:wrap;">
					<uni-icons type="circle-filled" size="20" class="icon" style="line-height: 17px;" color="#EE3F4D"
						v-if="xieyi" @click="xieyi = !xieyi"></uni-icons>
					<uni-icons type="circle" size="20" class="icon" style="line-height: 17px;" color="#aaa"
						v-if="!xieyi" @click="xieyi = !xieyi"></uni-icons>
					<text class="text-grey1">已阅读并同意</text>
					<!-- <text class="themeColor text-red">《用户协议》</text> -->
					<text class="themeColor text-red" @click="to_privacy(3)">《隐私协议》</text>
					<text class="themeColor text-red" @click="to_privacy(1)">《共享清单》</text>
					<text class="themeColor text-red" @click="to_privacy(2)">《敏感个人信息知情同意书》</text>
				</view>
			</view>
		</view>
	</view>

	<!-- 协议弹窗 -->
	<uni-popup ref="popup" background-color="rgba(0,0,0,0)" type="bottom" class="">
		<view class="bg-white padding-sm text-df" style="height: 250px;border-radius: 15px 15px 0 0">
			<uni-icons type="closeempty" size="20" style="float: right;" color="#aaa" @click="close_xieyi"></uni-icons>
			<view style="text-align: center; margin-top: 25px;" class="text-bold text-df">服务协议及隐私保护</view>
			<view class="margin-top-sm ">
				<text class="text-secondary-xl" style="">为了更好保障您的合法权益，请您阅读并同意</text>
				<text class="themeColor text-red" @click="to_privacy(3)">《隐私协议》</text>
				<text class="themeColor text-red" @click="to_privacy(1)">《共享清单》</text>
				<text class="themeColor text-red" @click="to_privacy(2)">《敏感个人信息知情同意书》</text>
				<text class="text-secondary-xl">。</text>
			</view>
			<button class="agree-btn theme-bg-color text-white margin-top-xl" style=""
				@click="agree_xieyi">同意并继续</button>
		</view>
	</uni-popup>


	<!-- 服务协议弹窗 -->
	<!-- <uni-popup ref="popup" background-color="rgba(0,0,0,0)" type="center" class="" :is-mask-click="false">
		<view class="bg-white padding-sm" style="height:450px;border-radius: 15px; margin: 0 8%;width: 84%;">
			<uni-icons type="closeempty" size="20" style="float: right;" color="#aaa" @click="close_xieyi"></uni-icons>
			<view class="  text-df" style="line-height: 50rpx;width: 100%;">
				<view style="text-align: center; " class="text-bold">{{content.content.agreementName}}</view>
				<view class="  text-df padding-top-xs" style="line-height: 50rpx;overflow-y: auto; height: 354px;">
					<uv-parse :content="content.content.content"></uv-parse>
				</view>
			</view>
			<view style="width: 100%;display: flex; justify-content: center; margin-top: 12rpx;" class="text-df">
				<view class="disagree-text" @click="close_xieyi">
					不同意
				</view>
				<view class="agree-text" @click="agree_xieyi">
					同意
				</view>
			</view>
		</view>
	</uni-popup> -->

	<view style="width: 100%;padding: 20px 40px;">
		<view class="login-font" @click="getLogin">
			注册/登录
		</view>
	</view>

	<!-- 验证码倒计时 -->
	<tn-verification-code ref="codeRef" uniqueKey="login-demo-4" :seconds="60" @change="codeChange">
	</tn-verification-code>

	<loading></loading>
</template>

<script setup lang="ts">
	// import { onReady } from "@dcloudio/uni-app"
	import { reactive, ref } from 'vue';
	import { imgURL3 } from '../../api/request'
	import { login, loginSendSms, register } from '../../api/myhome/login';
	import store from '../../store/login';
	// import { getAgreement } from "../../api/agreement/agreement";

	const from = reactive({
		phone: "",
		authCode: ""
	})

	const falg = ref(true)
	const tips = ref('获取验证码')
	const showPassword = ref(true)
	const xieyi = ref(false)
	const popup = ref(null)

	const agree_xieyi = () => {
		xieyi.value = true
		popup.value.close()
		//三次弹窗
		// num.value = num.value - 1
		// if (num.value <= 0) {
		// 	xieyi.value = true
		// } else {
		// 	getContent()
		// 	setTimeout(() => {
		// 		popup.value.open()
		// 	}, 500)
		// }
	}

	const close_xieyi = () => {
		popup.value.close()
		// uni.switchTab({
		// 	url: '/pages/index/index'
		// })
	}
	// 获取验证码倒计时被修改
	const codeChange = (event) => {
		tips.value = event
	}
	const getLogin = () => {
		if (xieyi.value) {
			register({ phone: from.phone, authCode: from.authCode }).then(res => {
				if (res.code === 200) {
					uni.setStorageSync('token', res.data)
					store.state.token = res.data
					uni.showToast({
						title: '注册成功',
						icon: 'none',
						duration: 2000
					});
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/index'
						})
					}, 500)
				}
			})
		} else {
			// num.value = 3
			// getContent()
			popup.value.open()
		}

	}
	// 返回
	const returnTo = () => {
		uni.switchTab({
			url: '/pages/me/me'
		})
	}
	const codeRef = ref(null);
	// 获取验证码
	const getCode = () => {
		console.log(from.phone.length)
		if (codeRef) {
			if (from.phone.length != 11) {
				uni.showModal({
					title: '请填写正确的手机号',
					content: '请填写正确的手机号',
				});
			} else {
				// this.$t.messageUtils.loading('正在获取验证码')
				loginSendSms(from.phone).then(res => {
					console.log(res)
					if (res.code == 200) {
						uni.showLoading({
							title: '验证码发送成功！'
						});
						setTimeout(() => {
							uni.hideLoading();
							console.log('safdafafdasf')
							// 通知组件开始计时
							codeRef.value.start()
						}, 1000)
					} else {
						uni.showModal({
							title: '登录提示',
							content: res.message,
						});
					}
				})
			}
		} else {
			uni.showToast({
				icon: 'none',
				title: this.$refs.code.secNum + '秒后再重试',
				duration: 2000
			});

		}
	}
	// 微信授权登录
	const getempower = () => {
		if (xieyi.value) {
			uni.login({
				"provider": "weixin",
				"onlyAuthorize": true, // 微信登录仅请求授权认证
				success: function (event) {
					const { code } = event
					console.log(event.code)
					//客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
					uni.request({
						header: {
							'content-type': 'application/x-www-form-urlencoded',
						},
						url: 'https://api.anred.qrsk.net/applet/user/login/wechat', //仅为示例，并非真实接口地址。
						method: "post",
						data: {
							code: event.code
						},
						success: (res) => {
							console.log(res)
							//获得token完成登录
							uni.setStorageSync('token', res.data.data)
							store.state.token = res.data.data
							if (res.data.code === 200) {
								uni.switchTab({
									url: "/pages/me/me"
								})
							}
						}
					});
				},
				fail: function (err) {
					// 登录授权失败
					// err.code是错误码
				}
			})

		} else {
			// num.value = 3
			// getContent()
			popup.value.open()
		}

	}
	//跳转隐私协议
	const to_privacy = (e) => {
		uni.navigateTo({
			url: '/pages/agreement/index?e=' + e
		})
	}

	// onReady(() => {
	// 	//请求协议内容
	// 	getContent()
	// 	setTimeout(() => {
	// 		popup.value.open()
	// 	}, 500)
	// })
	//弹窗次数
	// const num = ref(3)
	//协议内容
	// const content = reactive({
	// 	content: {
	// 		agreementName: "隐私政策",
	// 		agreementStatus: "1",
	// 		content: ''
	// 	},
	// 	title: [
	// 		'共享清单',
	// 		'敏感个人信息知情同意书',
	// 		'隐私政策'
	// 	]
	// })
	//获取协议内容
	// const getContent = () => {
	// 	getAgreement(content.title[num.value - 1]).then(res => {
	// 		if (res.code == 200) {
	// 			content.content.agreementName = res.data.agreementName
	// 			content.content.agreementStatus = res.data.agreementStatus
	// 			content.content.content = res.data.content
	// 		}
	// 	})
	// }
</script>

<style lang="less">
	.text {
		position: relative;
		width: 140px;
		height: 50px;
		/* 宽高 */
		background-color: #FBD7DA;
		/* 颜色 */
		border-radius: 10px;
		/* 设置圆角 */
		transform: perspective(15px)scale(1.1, 1.3) rotateX(5deg);
		/* 镜头距离元素表面的位置为8px，x轴为1.1倍y轴为1.3倍，绕x轴旋转-5度 */
		transform-origin: bottom left;
		/* top left = left top = 0 0中心点偏移量*/
		border: 1px solid #FBD7DA;
		z-index: 9;
		/* 边框 */
	}

	.text2 {
		position: relative;
		width: 140px;
		height: 50px;
		/* 宽高 */
		background-color: #EE3F4D;
		/* 颜色 */
		border-radius: 10px;
		/* 设置圆角 */
		transform: perspective(15px)scale(1.1, 1.3) rotateX(5deg);
		/* 镜头距离元素表面的位置为8px，x轴为1.1倍y轴为1.3倍，绕x轴旋转-5度 */
		transform-origin: bottom left;
		/* top left = left top = 0 0中心点偏移量*/
		border: 1px solid #EE3F4D;
		z-index: 9;
		/* 边框 */
	}

	.text-right2 {
		position: relative;
		width: 140px;
		height: 50px;
		/* 宽高 */
		background-color: #FBD7DA;
		/* 颜色 */
		border-radius: 10px;
		/* 设置圆角 */
		transform: perspective(15px)scale(1.1, 1.3) rotateX(-5deg);
		/* 镜头距离元素表面的位置为8px，x轴为1.1倍y轴为1.3倍，绕x轴旋转-5度 */
		transform-origin: top right;
		/* top left = left top = 0 0中心点偏移量*/
		border: 1px solid #FBD7DA;
		z-index: 9;
		/* 边框 */
	}

	.text-right {
		position: relative;
		width: 140px;
		height: 50px;
		/* 宽高 */
		background-color: #EE3F4D;
		/* 颜色 */
		border-radius: 10px;
		/* 设置圆角 */
		transform: perspective(15px)scale(1.1, 1.3) rotateX(-5deg);
		/* 镜头距离元素表面的位置为8px，x轴为1.1倍y轴为1.3倍，绕x轴旋转-5度 */
		transform-origin: top right;
		/* top left = left top = 0 0中心点偏移量*/
		border: 1px solid #EE3F4D;
		z-index: 9;
		/* 边框 */
	}

	.login-font {
		height: 60px;
		width: 100%;
		border-radius: 30px;
		background-color: #EE3F4D;
		text-align: center;
		color: #fff;
		font-size: 20px;
		align-items: center;
		display: flex;
		justify-content: center;
	}

	.empower-text {
		height: 60px;
		width: 100%;
		border-radius: 15px;
		background-color: #EE3F4D;
		text-align: center;
		color: #fff;
		font-size: 18px;
		align-items: center;
		display: flex;
		justify-content: center;
	}

	.agree-text {
		height: 36px;
		width: 40%;
		margin-left: 8%;
		border-radius: 5px;
		background-color: #EE3F4D;
		text-align: center;
		color: #fff;
		align-items: center;
		display: flex;
		justify-content: center;
	}

	.disagree-text {
		height: 36px;
		width: 40%;
		border-radius: 5px;
		background-color: #fff;
		text-align: center;
		color: #EE3F4D;
		border: 1px solid #EE3F4D;
		align-items: center;
		display: flex;
		justify-content: center;
	}
</style>